<template>
  <view class="tp-icon-menu">
    <tp-icon-menu-item v-for="(m, idx) in meunItems" v-bind="m" :key="'i-m-' + idx" @seleted="selectMenu"></tp-icon-menu-item>
  </view>
</template>

<script>
  export default {
    name:"tp-icon-menu",
    data() {
      return {
        meunItems: [{
          icon: "icon-travel",
          title: "去旅行",
          color: "#fd4e4e",
          page: "plan/start",
          tab: false
        },{
          icon: "icon-search",
          title: "找规划",
          color: "#acce0e",
          page: "search/search",
          tab: false
        },{
          icon: "icon-plan",
          title: "我的规划",
          color: "#ff9d00",
          page: "my/my_plan",
          tab: false
        },{
          icon: "icon-my",
          title: "我的",
          color: "#32a2f1",
          page: "my/my",
          tab: false
        }]
      };
    },
    methods: {
      selectMenu(e) {
        let pageIndex = e.page
        let tab = e.tab
        let page = `/pages/${pageIndex}`
        if (tab) {
          uni.switchTab({ url: page })
        } else {
          uni.navigateTo({ url: page })
        }
        
      }
    }
  }
</script>

<style lang="scss">
  
  .tp-icon-menu {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    margin-bottom: 12px;
  }

</style>